<template>
    <el-upload :multiple="multiple" :show-file-list="showfilelist" ref="upload" class="upload-demo" :data.sync="AnotherData"
        :action="action" :on-remove="handleRemove" :on-change.sync="handleChange" :on-success="handlesuccess"
        :on-error="handleerror" :file-list.sync="fileList" :headers="token" :auto-upload="autoupload">
		<el-button slot="trigger" :size="btnsize" type="primary">{{ content }}</el-button>
		<el-button v-show="upshow" style="margin-left: 10px;" :size="btnsize" type="success" @click="submitUpload_">上传到服务器</el-button>
    </el-upload>
</template>

<script>
export default {
    name: "UploadFileF",
    props: {
        AnotherData: {
            type: Object,
            required: true
        },
        multiple: {
            type: Boolean,
            required: false,
            default: true,
        },
        upshow: {
            type: Boolean,
            default: false,
        },
        showfilelist: {
            type: Boolean,
            default: true,
        },
        content: {
            type: String,
            required: false,
            default: '选取文件',
        },
        btnsize: {
            type: String,
            required: false,
            default: 'mini',
        },
        //用于在父级页面添加数据
        Addlistdata: {
            type: Function,
            required: false,
            default: function () {
                return;
            }
        },
        autoupload: {
            type: Boolean,
            default: false
        },
        btnclass: {
            type: Object,
            default: function () {
                return { width: '100%' }
            }
        },
		//文件上传后的回调函数
		CallbackFun: {
		    type: Function,
		    required: false,
		    default: function () {
		        return;
		    }
		},
    },
    data() {
        return {
            fileList: [],
            token: { Authorization: "Bearer " + window.sessionStorage.getItem('token') },
            update_result: true,
            apiresult: true,
            action: this.$http.defaults.baseURL + "PublicMethodApi/UploadFile/",
        }
    },
    methods: {
        submitUpload() {
            if (this.fileList.length > 0) {
                this.$refs.upload.submit();
            }
        },
        submitUpload_() {
            if (this.fileList.length > 0) {
                this.$refs.upload.submit();
            }
            else {
                this.$message.info('请选择你要上传的文件!');
            }
        },
        handleRemove(file, fileList) {
            this.fileList = fileList;
        },
        handleChange(file, fileList) {
            this.fileList = fileList;
            this.Addlistdata()
        },
        handlesuccess(response, file, fileList) {
            if (response) {
                this.$message.success('文件上传成功!')
                this.clearfilelist()
				this.CallbackFun()
            }
            else {
                this.$message.warning('文件上传失败,请重试!')
            }
        },
        handleerror() {
            this.clearfilelist()
            this.$message.warning('文件上传接口异常,请联系管理员!')
        },
        //清空已上传列表
        clearfilelist() {
            this.$refs.upload.clearFiles()
        }
    }
}
</script>

<style scoped>

</style>
